<template>
    <div id="container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span id="title">资产库导航</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="handleEnterLibrary">进入资产库</el-button>
            </div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div id="panel">
                        <h1>基础教学资源子库</h1>
                        <el-divider></el-divider>
                        <el-tag id="panel-notice">以下分类均按照课程组织，点击任意项将进入课程选择页面</el-tag>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">教案讲稿</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">试卷作业</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">音视频资料</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">多媒体课件</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">电子出版物</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">专题网站</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">电子案例</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">科研文献</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=1' }">项目源码</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div id="panel">
                        <h1>实践项目资产子库</h1>
                        <el-divider></el-divider>
                        <el-divider content-position="left"><router-link to="/library/list?id=3">行业标准与行业规范集</router-link></el-divider>
                        <el-divider content-position="left"><router-link to="/library/list?id=4">实践项目过程资产集</router-link></el-divider>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/library/list?id=6' }">标准过程子集</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=7' }">软件重用子集</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/library/list?id=8' }">项目经验子集</el-breadcrumb-item>
                        </el-breadcrumb>
                        <el-divider content-position="left"><router-link to="/search?query=%2a&amp;type=6">历史项目共享知识集</router-link></el-divider>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/search?query=%2a&type=6' }">配置管理子集</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/search?query=%2a&type=6' }">过程测量子集</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/search?query=%2a&type=6' }">问题与缺陷管理子集</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/search?query=%2a&type=6' }">软件工具子集</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    name:'HomeNav',
    data:function(){
        return{

        }
    },
    methods:{
        handleEnterLibrary:function(){
            this.$router.push('/library/root');
        }
    }
}
</script>

<style lang="scss" scoped>
#container{
    width:100%;
    height: 350px;
    box-sizing: border-box;
    padding-left:15%;
    padding-right: 15%;
    position: relative;
    min-width: 1069px;
    background-color: #eee;
    .box-card {
        width: 60%;
        position: absolute;
        top:-18%;
        left:50%;
        transform: translateX(-50%);
        #title{
            color: #2267c7;
            font-size: 18px;
        }
        #panel{
            text-align: center;
            #panel-notice{
                width:100%;
                margin-top:-20px;
                margin-bottom: 20px;
            }
            /deep/ .el-breadcrumb{
                line-height: 30px;
                display: inline-block;
                width:100%;
                margin: 0 auto;
            }
            .el-breadcrumb__inner a,
            /deep/ .is-link {
                color: #606266;
                font-weight: normal;
            }
            .el-breadcrumb__inner a:hover,
            /deep/ .is-link:hover {
                color: #2267c7;
                font-weight: normal;
            }
            a{
                color:black;
            }
        }
    }
}
</style>